/**
 * Created by zhuyongjie on 2017/10/20.
 */
/**
 * 显示流程图办理状态
 */
function showDiagramViewer(options) {

    var _default = {};

    //合并参数
    var opts = $.extend(true, _default, options);

    //获取流程图资源
    var imageUrl = basePath + "/process/queryDiagromSrc/image/" + opts.processInstanceId;

    //获取流程跟踪信息URL
    var traceUrl = basePath + "/process/" + opts.processInstanceId + "/trace"

    //获取流程历史信息
    $.getJSON(traceUrl, function (infos) {
        var positionHtml = "";

        // 生成图片
        var varsArray = new Array();
        $.each(infos, function (i, v) {
            var $positionDiv = $('<div/>', {
                'class': 'activity-attr'
            }).css({
                position: 'absolute',
                left: (v.x - 1),
                top: (v.y - 1),
                width: (v.width - 2),
                height: (v.height - 2),
                backgroundColor: 'black',
                opacity: 0,
                zIndex: $.fn.qtip.zindex - 1
            });

            // 节点边框
            var $border = $('<div/>', {
                'class': 'activity-attr-border'
            }).css({
                position: 'absolute',
                left: (v.x - 1),
                top: (v.y - 1),
                width: (v.width - 4),
                height: (v.height - 3),
                zIndex: $.fn.qtip.zindex - 2
            });

            if (v.currentActiviti) {
                $border.addClass('ui-corner-all-12').css({
                    border: '3px solid red'
                });
            }
            positionHtml += $positionDiv.prop("outerHTML") + $border.prop("outerHTML");
            varsArray[varsArray.length] = v.vars;
        });

        if ($('#workflowTraceDialog').length == 0) {
            $('<div/>', {
                id: 'workflowTraceDialog',
                title: '查看流程（按ESC键可以关闭）<button id="changeImg">如果坐标错乱请点击这里</button><button id="diagram-viewer">Diagram-Viewer</button>',
                style: 'display:none;',
                html: "<div><img src='" + imageUrl + "' style='position:absolute; left:0px; top:0px;' />" +
                "<div id='processImageBorder'>" +
                positionHtml +
                "</div>" +
                "</div>"
            }).appendTo('body');
        } else {
            $('#workflowTraceDialog img').attr('src', imageUrl);
            $('#workflowTraceDialog #processImageBorder').html(positionHtml);
        }

        // 设置每个节点的data
        $('#workflowTraceDialog .activity-attr').each(function (i, v) {
            $(this).data('vars', varsArray[i]);
        });

        var clientWidth = document.body.clientWidth * 0.9 + 'px';
        var clientHeight = document.body.clientHeight + 'px';

        layer.open({
            title: "流程图",
            type: 1,
            area: [clientWidth, clientHeight],
            content: $('#workflowTraceDialog'),
            maxmin: true,
            success: function () {
                // 此处用于显示每个节点的信息，如果不需要可以删除
                $('.activity-attr').qtip({
                    content: function () {
                        var vars = $(this).data('vars');
                        var tipContent = "<table class='need-border'>";
                        $.each(vars, function (varKey, varValue) {
                            if (varValue) {
                                tipContent += "<tr><td class='label'>" + varKey + "</td><td>" + varValue + "<td/></tr>";
                            }
                        });
                        tipContent += "</table>";
                        return tipContent;
                    },
                    position: {
                        at: 'bottom left',
                        adjust: {
                            x: 3
                        }
                    }
                });
            }
        })

    });

}